<template>
    <div class="login-container">
        <div class="login-box">
            <!-- tag标签 -->

            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch=true>
                <el-tab-pane label="手机号登陆" name="first">
                    <el-form :model="loginFormTel" style="width: 400px">
                        <el-form-item required prop="tel">
                            <el-input v-model="loginForm.tel" :prefix-icon="UserFilled" clearable
                                placeholder="请输入11位手机号" />
                        </el-form-item>
                        <br>
                        <el-form-item required prop="password6" class="yanzhengma">
                            <el-input v-model="loginForm.password6" :prefix-icon="Lock" clearable
                                placeholder="请输入6位验证码" />
                        </el-form-item>
                        <el-button type="primary" class="b2" style="width: 40%" @click="register">
                            <el-text class="text2" size="large">发送验证码</el-text>
                        </el-button>
                        <br>
                        <el-button type="primary" class="b3" @click="register">
                            <el-text class="text2" size="large">登录/注册</el-text>
                        </el-button>
                    </el-form>
                    <el-checkbox v-model="checked1" label="下次自动登录" size="large" class="c1" />
                    <a href="https://passport.zcool.com.cn/getpassword.do?appId=1006" class="a1">
                        <el-text class="text2" size="default">忘记密码</el-text>
                    </a>
                </el-tab-pane>

                <el-tab-pane label="密码登录" name="second">
                    <el-form :model="loginForm" style="width: 400px" :rules="formRules">
                        <el-form-item required prop="username">
                            <el-input v-model="loginForm.username" :prefix-icon="UserFilled" clearable
                                placeholder="请输入用户名" />
                        </el-form-item>
                        <br>
                        <el-form-item required prop="password">
                            <el-input v-model="loginForm.password" :prefix-icon="Lock" clearable placeholder="请输入密码"
                                type="password" show-password />
                        </el-form-item>
                        <el-button type="primary" class="b1" style="width: 40%" @click="login" :disabled="!enableLogin">
                            <el-text class="text2" size="large">登录</el-text>
                        </el-button>
                        <el-button type="primary" class="b4" style="width: 40%" @click="register">
                            <el-text class="text2" size="large">注册</el-text>
                        </el-button>
                    </el-form>
                    <el-checkbox v-model="checked1" label="下次自动登录" size="large" class="c1" />
                    <a href="https://passport.zcool.com.cn/getpassword.do?appId=1006" class="a1">
                        <el-text class="text2" size="default">忘记密码</el-text>
                    </a>
                </el-tab-pane>
                <el-tab-pane label="第三方登录" name="third">
                    <div>
                        <img class="x1" src="@/assets/G-iIgBv4rX.png">
                        <br>
                    </div>
                    <div>
                        <p class="text3">
                            使用微信扫一扫登录<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;“焕发”
                        </p>
                    </div>
                    <div>
                        <img class="x2" src="@/assets/QQ-circle-fill.png">
                        <img class="x3" src="@/assets/微信.png">
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-text class="text1">
                登录和注册即代表同意
                <el-text type="warning"><a class="a2" href="https://www.zcool.com.cn/userAgreement">《用户协议》</a></el-text>
                和
                <el-text type="warning"><a class="a2" href="https://www.zcool.com.cn/policy">《个人隐私政策》</a><br></el-text>
                未成年人请在监护人的同意下使用本网站请勿擅自注册
            </el-text>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch, ref } from "vue"
import { UserFilled, Lock } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ElTabs, ElTabPane, ImageProps } from 'element-plus';
import type { TabsPaneContext } from 'element-plus'

const router = useRouter();

const checked1 = ref(false)




// 标签页
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


let enableLogin = ref(false);



let loginForm = reactive({
    username: '',
    password: ''
})

watch(() => [loginForm.username, loginForm.password], () => {
    enableLogin.value = loginForm.username.length > 0 && loginForm.password.length > 0
}, { immediate: true })

const formRules = reactive({
    username: { required: true, message: '请输入账号', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' }
})

function login() {
    request.post('/api/users/login', loginForm)
        .then(res => {
            if (res.code == '210') {
                ElMessage.success("登录成功")
                localStorage.setItem('token', res.data)
                router.push("/post")
            } else {
                ElMessage.error(res.msg)
            }
        }).catch(error => {
            console.log(error)
        })
}

</script>

<style scoped>
.x1 {
    width: 60%;
    /*居中 */
    float: left;
    margin-top: 10px;
    margin-left: 100px;
}
.x2:hover{
    background-color: #ffffff;
}
.x2{
    width: 10%;
    float: left;
    margin-left: 150px;
    margin-top: 10px;
    
}
.x3{
    width: 10%;
    float: left;
    margin-left: 100px;
    margin-top: 10px;
}
.x3:hover{
    background-color: #ffffff;
}

.text3{
    color: #000;
    font-size: 17px;
    margin-top: 300px;
    margin-left: 180px;
}


.yanzhengma {
    width: 200px;
}

.b3 {
    width: 100%;
}

.demo-tabs {
    width: 500px;
    margin-top: 50px;
    margin-left: 50px;

}

.el-form {
    margin-top: 100px;
    /*居中 */
    margin-left: 50px;
}

.el-input {
    width: 500px;
    height: 50px;
}


/* .el-tabs__item.is-active {
    color: #ffb800;
} */


.login-container {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("@/assets/登录页底面.png");
    background-size: cover;
}

/*登录框 */
.login-box {
    height: 700px;
    width: 600px;
    /*距离左侧1000px */
    margin-left: 800px;
    /*颜色*/
    background-color: #f06224;
    /*不透明度 */
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 15px;
}

.el-button {
    height: 50px;
    margin: 5px;
    background-color: #ffb800;
    border-color: #ffb800;
    margin-top: 30px;
    margin-left: 0px;
}

.b2 {
    /*距离左侧30px */
    float: right;
    margin-right: 0px;
    margin-top: -70px;
}

.b4 {
    /*距离左侧30px */
    float: right;
    margin-right: 0px;

}

.a1 {
    float: right;
    margin-right: 100px;
    margin-top: 40px;

}

/*按钮触发颜色 */
.el-button:hover,
.el-button:focus {
    background-color: #ff5500;
    /* 自定义颜色 */
    border-color: #ffb800;
    /* 边框颜色 */
    color: #ffffff;
    /* 文字颜色 */
}

.c1 {
    margin-top: 30px;
    float: left;
    margin-left: 55px;
    color: #000;

}

.c1-true-label {
    background-color: #ffb800;
}

.text1 {
    float: left;
    margin-top: 80px;
    margin-left: 120px;
    color: #000;
}

.text2 {
    color: #000;
}

.a2 {
    color: #ffb800;
    text-decoration: none;
}

.a2:hover {
    color: #ffb800;

}
</style>